<template>
  <page-header-one :scrollTop="scrollTop"></page-header-one>

  <div class="container">
    <div v-if="detail.name" class="main">
      <div class="base-info">
        <div class="platform-list flex">
          <div v-for="(item, index) in platformList" :key="index"
            class="platform-item flex-center flex-align-items-center pointer"
            :class="{ active: item.name === platformCustom, disabled: !detail.platforms.some(platform => platform === item.name) }"
            @click="platformChange(item.name)">
            <img :src="item.img">
            <span class="font-12">{{ item.name }}</span>
          </div>
        </div>
        <div :class="{ 'info-fixed': scrollTop > 144 }">
          <div class="info flex-between">
            <div class="info-left flex">
              <img :src="detail.avatar" class="info-avatar pointer">
              <div class="info-center">
                <div class="row-name flex flex-align-items-center">
                  <p class="name font-20-B pointer">{{ detail.name }}</p>
                  <p class="location flex flex-align-items-center">
                    <i class="iconfont icon-weizhi"></i>
                    <span class="font-14">{{ detail.country }}</span>
                  </p>
                  <div v-if="scrollTop > 144" class="row-tags flex">
                    <p v-for="(item, index) in detail.category" :key="index" class="font-12">{{ item.name }}</p>
                  </div>
                </div>
                <div v-if="scrollTop <= 144" class="row-tags flex">
                  <p v-for="(item, index) in detail.category" :key="index" class="font-12">{{ item.name }}</p>
                </div>
                <div v-if="scrollTop <= 144" class="row-time flex flex-align-items-center font-14">
                  上次发布视频时间：{{ detail.releaseTime }}<span>|</span>频道创建时间：{{ detail.channelCreated }}
                </div>
                <div class="row-data flex">
                  <div class="row-data-item">
                    <p class="row-data-item-num font-18-B">{{ numConvert(detail.fansNum, 2) }}</p>
                    <div class="row-data-item-name font-14">粉丝数</div>
                  </div>
                  <div class="row-data-item">
                    <p class="row-data-item-num font-18-B">{{ numConvert(detail.avgPlayNum, 2) }}</p>
                    <div class="row-data-item-name flex flex-align-items-center font-14">
                      平均观看量
                      <el-tooltip :content="`近60天平均观看量为${numConvert(detail.avgPlayNum, 2)}`" placement="bottom"
                        effect="light">
                        <i class="iconfont icon-chakantiezigengduojubao pointer"></i>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="row-data-item">
                    <p class="row-data-item-num font-18-B">{{ detail.monthRelease }}</p>
                    <div class="row-data-item-name font-14">月均发布数</div>
                  </div>
                  <div class="row-data-item">
                    <p class="row-data-item-num font-18-B">{{ detail.avgInteractRate }}</p>
                    <div class="row-data-item-name font-14 flex flex-align-items-center">
                      平均互动率
                      <el-tooltip :content="`近60天平均互动率为${detail.avgInteractRate}`" placement="bottom" effect="light">
                        <i class="iconfont icon-chakantiezigengduojubao pointer"></i>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="row-data-item">
                    <p class="row-data-item-num font-18-B">{{ numConvert(detail.businessNum, 2) }}</p>
                    <div class="row-data-item-name font-14">商业合作数</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="info-right flex-between flex-column">
              <div class="info-right-update flex flex-align-items-center">
                <img :src="platformList.find(item => item.name === platformCustom).img">
                <p class="font-12">更新时间：{{ detail.updateTime }}</p>
                <div class="flex flex-align-items-center pointer">
                  <i class="iconfont icon-ERP_gengxin"></i>
                  <span class="font-12">更新</span>
                </div>
              </div>
              <div class="info-right-btns flex flex-align-items-center">
                <p class="info-right-btn flex-center flex-align-items-center pointer" @click="collectChange">
                  <i class="iconfont" :class="detail.collect ? 'icon-guanzhu-yiguanzhu' : 'icon-guanzhu-weiguanzhu'"></i>
                </p>
                <p class="info-right-btn flex-center flex-align-items-center pointer">
                  <i class="iconfont icon-a-youjian5" :class="{ disabled: !detail.hasEmail }"></i>
                </p>

                <el-popover placement="bottom" :width="312" trigger="hover">
                  <template #reference>
                    <p class="info-right-btn flex-center flex-align-items-center pointer">
                      <i class="iconfont icon-baojia"></i>
                    </p>
                  </template>
                  <div class="quotation">
                    <div class="quotation-title flex-between flex-align-items-center">
                      <p class="font-14">红人预估报价</p>
                      <p class="font-12">基于{{ platformList.find(item => item.name === platformCustom).name }}数据</p>
                    </div>
                    <div class="quotation-value flex-between flex-align-items-center">
                      <p class="font-14">预估报价</p>
                      <p class="font-14-B">{{ detail.quotation }}</p>
                    </div>
                    <div class="quotation-value flex-between flex-align-items-center">
                      <p class="font-14">预估CPM</p>
                      <p class="font-14-B">{{ detail.cpm }}</p>
                    </div>
                  </div>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'base-card': scrollTop > 144 }">
        <div class="card-bg flex-between flex-align-items-center">
          <el-tabs v-model="tabsCheck" @tab-click="tabsHandleClick">
            <el-tab-pane label="红人概况" name="blog-basic"></el-tab-pane>
            <el-tab-pane label="受众分析" name="fans-part"></el-tab-pane>
            <el-tab-pane label="内容分析" name="works-part"></el-tab-pane>
            <el-tab-pane label="商业化分析" name="business-part"></el-tab-pane>
          </el-tabs>
          <div class="base-opt flex flex-align-items-center">
            <p v-if="detail.hide" class="flex flex-align-items-center pointer" @click="hideConfirm">
              <i class="iconfont icon-guankan"></i>
              <span class="font-14">显示红人</span>
            </p>
            <p v-else class="flex flex-align-items-center pointer" @click="hideConfirm">
              <i class="iconfont icon-yincang"></i>
              <span class="font-14">隐藏红人</span>
            </p>
            <p class="flex flex-align-items-center pointer" @click="reportPopupShow = true">
              <i class="iconfont icon-jubao"></i>
              <span class="font-14">举报记录</span>
            </p>
          </div>
        </div>
      </div>

      <blog-basic :detail="detail"></blog-basic>
      <fans-part :detail="detail"></fans-part>
      <works-part :detail="detail"></works-part>
      <business-part :detail="detail"></business-part>
    </div>
  </div>

  <page-footer-one></page-footer-one>

  <pop-mask></pop-mask>

  <report-popup :show="reportPopupShow" @close="reportPopupShow = false"></report-popup>

  <collect-popup v-if="collectPopupShow" @close="collectPopupShow = false"></collect-popup>
</template>

<script setup>
import PageHeaderOne from '@/components/pageHeaderOne.vue';
import PageFooterOne from '@/components/pageFooterOne.vue';
import BlogBasic from './components/blogBasic.vue';
import FansPart from './components/fansPart.vue';
import WorksPart from './components/worksPart.vue';
import BusinessPart from './components/businessPart.vue';
import PopMask from './components/popMask.vue';
import ReportPopup from './components/reportPopup.vue';
import CollectPopup from './components/collectPopup.vue';
import numConvert from '@/js/numConvert.js';
import { ref, onMounted } from 'vue';
import api from '@/api/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';

const route = useRoute();

const platformList = [
  {
    name: 'YouTube',
    img: require('../../assets/icon-1.png')
  },
  {
    name: 'Tik Tok',
    img: require('../../assets/icon-2.png')
  },
  {
    name: 'Instagram',
    img: require('../../assets/icon-3.png')
  }
];

const scrollTop = ref(0);
const platformCustom = ref('YouTube');
const tabsCheck = ref('blog-basic');
const reportPopupShow = ref(false);
const collectPopupShow = ref(false);
const detail = ref({
  platforms: ['YouTube', 'Tik Tok']
});
// 根据页面是否离开顶部，判断顶部栏样式
const pageChange = () => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
  const tabsPartDom = document.getElementsByClassName('tabs-part');
  const partClass = ['blog-basic', 'fans-part', 'works-part', 'business-part'];
  for (let key in tabsPartDom) {
    if (scrollTop.value >= tabsPartDom[key].offsetTop - 278) {
      tabsCheck.value = partClass[key];
    }
  }
}
const platformChange = e => {
  if (platformCustom.value !== e && detail.value.platforms.some(platform => platform === e)) {
    platformCustom.value = e;
  }
}
const tabsHandleClick = e => {
  window.scrollTo({
    top: document.getElementsByClassName(e.props.name)[0].offsetTop - 278,
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
}
// 隐藏红人确认框
const hideConfirm = () => {
  ElMessageBox.confirm(
    '隐藏该红人后，搜索时将不会展示',
    '提示',
    {
      confirmButtonText: '确定 隐藏',
      cancelButtonText: '取消',
      cancelButtonClass: 'cancel-btn',
      confirmButtonClass: 'confirm-btn'
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
// 取消收藏或打开收藏夹列表弹窗
const collectChange = () => {
  let inter = null;
  if (detail.value.collect) {
    inter = api.sensation.unfavoriteInfluencer;
  } else {
    inter = api.sensation.favoriteInfluencer;
  }
  inter({ influencerId: route.query.id }).then(() => {
    if (detail.value.collect) {
      ElMessage.success('取消收藏成功');
    } else {
      ElMessage.success('收藏成功');
    }
    detail.value.collect = !detail.value.collect;
  }).catch(err => {
    ElMessage.error(err.msg);
  });
  // if (detail.value.collect) {
  //   detail.value.collect = false;
  // } else {
  //   collectPopupShow.value = true;
  // }
}
// 获取红人详情
const queryInfluencerShow = () => {
  api.sensation.queryInfluencerShow({
    influencerId: route.query.id
  }).then(res => {
    detail.value = {
      ...res,
      avgInteractRate: res.avgInteractRate * 100 + '%',
      businessInteractRate: res.businessInteractRate * 100 + '%',
      businessPublishFrequ: res.businessPublishFrequ * 100 + '%',

      platforms: ['YouTube', 'Tik Tok'],
      updateTime: '2023-12-28',
      monthRelease: 30,
      collect: false,
      hasEmail: true,
      quotation: '809$-2032$',
      cpm: '8$-30$',
      averageViewsMonthContrast: '12.50%',
      averageViewsMonthContrastType: 'reduce',
      averageInteractionRateMonthContrast: '1.10%',
      averageInteractionRateMonthContrastType: 'add',
      activation: '高',
      averageViewsThirtyDay: 92565,
      averageViewsSixtyDay: 97565,
      averageViewsNinetyDay: 102565,
      averageViewsFifteen: 74023,
      ranking: '5%'
    };
  });
}

onMounted(() => {
  pageChange();
  window.addEventListener("scroll", pageChange, false);
  queryInfluencerShow();
});
</script>

<style lang="less" scoped>
.container {
  background: #f5f6fa;
  padding: 84px 0 120px;

  .main {
    width: 1260px;
    margin: 0 auto;
  }
}

.base-info {
  width: 1260px;
  height: 294px;
  margin: 0 auto;
  background-image: url(@/assets/base-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 16px 0 32px 0;

  .platform-list {
    width: 352px;
    background: #f8f8f8;
    border-radius: 10px;
    margin: 0 0 38px 16px;

    .platform-item {
      width: 33.33%;
      border-radius: 10px;

      &.active {
        border: 1px solid @main-color;
        background: rgba(255, 82, 119, .1);
      }

      &.disabled {
        cursor: no-drop !important;

        img {
          filter: grayscale(100%) opacity(.5);
        }

        span {
          color: #999;
        }
      }

      img {
        width: 30px;
        margin-right: 6px;
      }

      span {
        color: #333;
      }
    }
  }

  .info-fixed {
    position: fixed;
    left: 0;
    top: 60px;
    z-index: 100;
    width: 100%;
    background: #fff;
    padding: 32px 0 24px;
  }

  .info {
    width: 1260px;
    margin: 0 auto;
    padding: 0 44px 0 16px;

    .info-left {
      .info-avatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        margin-right: 24px;
      }

      .info-center {
        width: 700px;

        .row-name {
          margin-bottom: 8px;

          .name {
            color: #333;
            margin-right: 8px;

            &:hover {
              color: @main-color;
            }
          }

          .location {
            margin-right: 16px;

            i {
              margin-right: 2px;
              color: #d8d8d8;
            }

            span {
              color: #666;
            }
          }

          .row-tags {
            margin-bottom: 0;
          }
        }

        .row-tags {
          margin-bottom: 8px;

          p {
            height: 24px;
            padding: 0 8px;
            background: hsla(0, 0%, 93%, .4);
            border-radius: 12px;
            border: 1px solid #dcdee0;
            color: #666;
            line-height: 22px;
            text-align: center;
            margin-right: 8px;

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .row-time {
          color: #666;
          margin-bottom: 26px;

          span {
            margin: 0 10px;
          }
        }

        .row-data {
          .row-data-item {
            height: 50px;
            width: 140px;
            padding: 2px 0 2px 18px;
            border-left: 1px solid #ededed;

            .row-data-item-num {
              color: #333;
              line-height: 26px;
            }

            .row-data-item-name {
              color: #999;

              i {
                color: #999;
                margin-left: 4px;
              }
            }
          }
        }
      }
    }

    .info-right {
      .info-right-update {
        justify-content: flex-end;

        img {
          width: 20px;
          margin-right: 8px;
        }

        p {
          color: #999;
          margin-right: 12px;
        }

        div {
          i {
            color: @main-color;
            margin-right: 4px;
          }

          span {
            color: @main-color;
          }
        }
      }

      .info-right-btns {
        .info-right-btn {
          width: 50px;
          height: 50px;
          border-radius: 14px;
          margin-left: 24px;
          background: #f8f8f8;

          &.disabled {
            cursor: no-drop !important;

            i {
              color: #dcdee0 !important;
            }
          }

          &:hover {
            background: #ffedf1;

            i {
              color: @main-color;
            }
          }

          &:first-child {
            i {
              color: @main-color;
            }
          }

          i {
            font-size: 30px;
            color: #999;
          }
        }
      }
    }
  }
}

.base-card {
  position: fixed;
  left: 0;
  top: 206px;
  z-index: 100;
  width: 100%;
  background: #f5f6fa;
}

.card-bg {
  width: 1260px;
  height: 72px;
  margin: 0 auto;
  background: #f5f6fa;
  padding: 0 24px;

  &::v-deep {
    .el-tabs__nav-wrap {
      &::after {
        display: none !important;
      }
    }

    .el-tabs__item {
      color: #666;

      &:hover {
        color: #666;
      }

      &.is-active {
        color: #333;
        font-weight: bold;

        &:hover {
          color: #333;
        }
      }
    }

    .el-tabs__active-bar {
      background: @main-color !important;
      height: 4px;
    }
  }

  .base-opt {
    p {
      margin-left: 48px;

      &:hover {

        i,
        span {
          color: @main-color;
        }
      }

      i {
        color: #666;
        margin-right: 8px;
      }

      span {
        color: #666;
      }
    }
  }
}

.quotation {
  padding: 16px;

  .quotation-title {
    p {
      &:first-child {
        color: #333;
      }

      &:last-child {
        color: #666;
      }
    }
  }

  .quotation-value {
    margin-top: 16px;
    height: 40px;
    padding: 12px;
    background: #f5f6fa;
    border-radius: 2px;

    p {
      &:first-child {
        color: #999;
      }

      &:last-child {
        color: @main-color;
      }
    }
  }
}
</style>
